<template>
  <v-container
    class="fill-height bg"
    fluid
  >
    <v-row
      align="center"
      justify="center"
    >
      <v-col
        cols="12"
        sm="10"
        md="6"
      >
        <v-alert
          class="cubic-redo"
          light
          dense
          color="white"
          colored-border
          :value="showLoginForm"
          border="top"
          origin="transform-origin"
          transition="fab-transition"
        >
          <v-card class="elevation-0">
            <v-toolbar
              color="white"
              flat
            >
              <v-toolbar-title>
                登录
              </v-toolbar-title>
              <v-spacer />

              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-btn color="secondary" depressed text v-on="on" @click="goRegiister">
                    <v-icon dark>mdi-account-plus</v-icon>
                  </v-btn>
                </template>
                <span>没有账号？快来注册</span>
              </v-tooltip>

            </v-toolbar>
            <v-card-text>
              <v-form
                ref="loginForm"
                v-model="valid"
              >
                <v-text-field
                  v-model="username"
                  label="Account"
                  name="username"
                  prepend-icon="mdi-emoticon-happy"
                  type="text"
                  :rules="[rules.required,rules.username.min]"
                  placeholder="输入你的用户名"
                />

                <v-text-field
                  id="password"
                  v-model="password"
                  label="Password"
                  name="password"
                  prepend-icon="mdi-lock"
                  :type="visible ? 'text' : 'password'"
                  :rules="[rules.required,rules.password.min]"
                  placeholder="输入你的密码"
                  @click:append="visible = !visible"
                />

                <v-text-field
                  v-model="captcha"
                  label="Captcha"
                  name="captcha"
                  prepend-icon="mdi-heart"
                  type="text"
                  placeholder="输入验证码"
                />

                <v-card-actions class="grid-list-xl justify-start">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                      <v-btn
                        small
                        fab
                        color="#1DA1F3"
                        class="ml-2 white--text"
                        v-on="on"
                        @click="loginOauth"
                      >

                        <v-icon dark>mdi-twitter-box</v-icon>
                      </v-btn>
                    </template>
                    <span>Echo认证</span>
                  </v-tooltip>

                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                      <v-btn
                        fab
                        small
                        color="#A34AB0"
                        class="ml-5 white--text"
                        v-on="on"
                        @click="loginGithHub"
                      >
                        <v-icon dark>mdi-github-circle</v-icon>
                      </v-btn>
                    </template>
                    <span>GitHub认证</span>
                  </v-tooltip>

                </v-card-actions>
                <v-card-actions>
                  <v-spacer />
                  <v-btn
                    color="light-blue lighten-4"
                    :disabled="!valid"
                    :loading="loading"
                    @click="submit"
                  >GO!
                  </v-btn>
                </v-card-actions>
              </v-form>
            </v-card-text>

          </v-card>
        </v-alert>
        <v-alert
          class="cubic-redo"
          light
          dense
          color="white"
          colored-border
          :value="showRegisterForm"
          border="top"
          transition="fab-transition"
        >
          <RegisterPage ref="registerPage" @goLoginForm="goLogin" />

        </v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import '@/assets/css/login/login.scss'
import { loginWithPassword } from '@/api/user'
import RegisterPage from './RegisterPage'

export default {
  name: 'login',
  components: {
    RegisterPage
  },
  props: {
    source: String
  },
  data: () => ({
    showLoginForm: true,
    showRegisterForm: false,
    valid: false, // 表单校验结果
    username: '', // 用户名
    password: '', // 密码
    captcha: 'ccloud', // 验证码
    captcha_image: '', // 验证码图片
    visible: false, // 是否显示密码
    rules: {
      required: value => !!value || '什么都不输入就想进去吗！',
      username: {
        min: v => v.length >= 2 || '至少输入2位'
      },
      password: {
        min: v => v.length >= 6 || '至少输入6位',
        passwordFormatInvalid: v => /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,15}$/.test(v) || ('6~15个字符，至少1个大写字母，1个小写字母，1个数字和1个特殊字符')
      }
    },
    loading: false// 登录按钮的加载状态

  }),
  created() {
    // console.log("重定向地址为:");
  },
  methods: {
    loginOauth() {
      console.log('使用oauth2认证登录')
    },
    loginGithHub() {
      console.log('使用GitHub认证登录')
    },
    submit() {
      console.log('提交了登录表单')
      const that = this
      this.loading = true
      const params = {
        username: this.username,
        password: this.password,
        captcha: this.captcha
      }
      loginWithPassword(params)
        .then(res => {
          that.loading = false
          // 存入store
          this.$store.commit('setUserInfo', res.result.userInfo)
          this.$store.commit('setAccessToken', res.result.token.access_token)
          // 登陆成功后 重定向至首页
          this.$router.replace('/')
        })
        .catch(err => {
          that.loading = false
          this.$iziToast.error({ message: err.message })
          // console.log("登录出现异常", err)
        })
    },
    goRegiister() {
      // 切换注册表单
      this.showLoginForm = false
      this.showRegisterForm = true
      // TODO 清空已输入的用户名密码信息
    },
    goLogin() {
      // 切换注册表单
      this.showLoginForm = true
      this.showRegisterForm = false
      // TODO 清空注册账号信息
    }
  }
}
</script>

<style scoped>

</style>
